---
name: useInViewport
route: /useInViewport
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

# useInViewport

一个用于判断dom元素是否在可视范围之内的 Hook

## 代码演示

### 基本用法

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='基本用法' description='使用 ref 监听节点在视图变化或者滚动时是否在可视范围之内'>
  <Demo1 />
</JackBox>

### 懒加载（用于监听同一组件内后渲染节点）

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='懒加载（用于监听同一组件内后渲染节点）' description='传入 function 来监听 dom 节点'>
  <Demo2 />
</JackBox>

## API

```
const [ inViewPort, ref? ] = useInViewport(dom);
```

### Result

| 参数     | 说明                                     | 类型       |
|----------|------------------------------------------|------------|
| inViewPort  | 判断dom元素是否在可视范围之内的标志                          | boolean    |
| ref     | 当未传入任何参数时，将 ref 绑定给需监听的节点      | -        |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |
